<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goback"
    ></topTitle>
    <div style="position: absolute; right: 24px; top: 7px">
      <el-button
        type="primary"
        class="createSalaryBut"
        @click="toEdit"
        v-if="isShowUpdateBtn"
      >
        <i class="iconfont iconbianji"></i
        ><span class="opetareText" style="vertical-align: middle">编辑</span>
      </el-button>
    </div>
    <div class="mainCon">
      <el-row>
        <span class="labelWidth color333 fontWeight color333 fontWeight"
          >用户名：</span
        >
        <span class="information">{{ infos.username || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">登录密码：</span>
        <!-- <el-input class="information" type="password" v-model="password">
                </el-input> -->
        <span class="information" style="vertical-align: middle">******</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">姓名：</span>
        <span class="information">{{ infos.nickname || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">手机号：</span>
        <span class="information">{{ infos.tel || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">账号状态：</span>
        <!-- <span class="information">{{infos.enable || "--"}}</span> -->
        <span class="information" v-if="infos.enabled == '1'">正常</span>
        <span class="information" v-else>禁用</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">归属公司：</span>
        <span v-if="loginType == 'company'" class="information"
          >本公司（施工方）</span
        >
        <span v-else class="information">{{ infos.companyName || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth color333 fontWeight">岗位：</span>
        <span
          v-if="loginType == 'company'"
          class="information"
          style="
            position: relative;
            display: inline-block;
            width: 120px;
            vertical-align: top;
            margin-top: 5px;
            margin-bottom: 10px;
          "
        >
          <el-radio
            v-model="radio"
            disabled
            label="PROJECT_MANAGER"
            style="display: block"
            >项目管理员</el-radio
          >
          <el-radio
            v-model="radio"
            disabled
            label="LABOR_ADMINISTRATOR"
            style="display: block; margin-top: 10px"
            >劳资专管员</el-radio
          >
          <!--                    <el-checkbox v-model="proAppChecked" disabled style="display: block;position: absolute;left: 140px;top:-5px;">在额外授予【申报项目】的权限</el-checkbox>-->
        </span>
        <span v-else class="information">{{ infos.roleName }}</span>
      </el-row>
      <el-row v-if="loginType == 'company'">
        <span class="labelWidth color333 fontWeight">管辖项目：</span>
        <span
          class="information"
          style="display: inline-block; vertical-align: top"
        >
          <div
            class="projectInfo"
            v-if="infos.userProjects && infos.userProjects.length > 0"
          >
            <ul>
              <li v-for="(item, index) of infos.userProjects" :key="index">
                <p>{{ item.projectName }}</p>
              </li>
            </ul>
          </div>
          <div class="noProject" v-else>暂无管辖项目</div>
        </span>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'projectRightDetail',
  data() {
    return {
      loginType: '',
      titleText: '账号详情',
      back: true,
      // password: "", //密码
      radio: '', //单选项
      id: '', //详情id
      isShowUpdateBtn: '',
      infos: '',
      proAppChecked: false,
      proApp: '',
    }
  },
  created() {
    if (this.$store.state.userType === 'COMPANY') {
      this.loginType = 'company'
    }
    this.id = this.$route.query.id
    //获取详情数据
    this.getInfo()
    this.getProapp()
    this.isShowUpdateBtn =
      this.$store.state.buttonLimitsArr.indexOf('projectAuth:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectAuthSGF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectUserList:update') > -1
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.push('/home/projectRight/projectRightList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/projectRight/projectRightList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getInfo() {
      this.axios({
        method: 'post',
        url: 'api-u/users/subaccount/detail',
        data: {
          id: this.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.infos = response.data.result
              this.radio = this.infos.roleCode
              for (var i = 0; i < this.infos.roles.length; i++) {
                var code = this.infos.roles[i].code
                if (code === 'PROJECT_APPLICATION') {
                  this.proAppChecked = true
                }
              }
              // this.password = this.infos.password;
            } else {
              this.$message({
                type: 'error',
                message: '数据获取失败',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getProapp() {
      this.axios({
        method: 'post',
        url: 'api-u/role/proapp',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.proApp = response.data.result[0].code
            } else {
              this.$message({
                type: 'error',
                message: '数据获取失败',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },

    //跳转到修改
    toEdit() {
      let pathObj = {
        path: '/home/projectRight/addProjectRight',
        name: 'addProjectRight',
        query: {
          id: this.id,
          type: 'edit',
        },
      }
      if (this.loginType != 'company') {
        pathObj.query.projectId = this.$route.query.projectId
        pathObj.query.projectName = this.$route.query.projectName
      }
      this.$router.push(pathObj)
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/projectRight/projectRightList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .topContent {
    background: #e4ebf1;
    height: 67px;
    line-height: 40px;
    padding: 15px 24px;

    .titleTop {
      font: bold 18px Microsoft YaHei;
      color: #333333;
      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
    .alignRight {
      text-align: right;
    }
  }
  .mainCon {
    padding: 24px 50px;
    height: calc(100% - 67px);
    overflow-y: auto;
    .labelWidth {
      width: 80px;
      font-size: 14px;
      text-align: left;
      color: #333333;
      display: inline-block;
      height: 40px;
    }
    .information {
      font-size: 14px;
      color: #666666;
    }
    .specialColor {
      color: #009588;
      font-weight: bold;
    }
    .projectInfo {
      width: 662px;
      height: 235px;
      background: #f5f7fa;
      padding: 12px 22px;
      overflow: auto;
      border: 1px solid #dee5f4;
      li {
        position: relative;
        line-height: 28px;
        p {
          padding-left: 16px;
          &::before {
            content: '';
            width: 8px;
            height: 8px;
            display: inline-block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: #c1c5cd;
            border-radius: 50%;
          }
        }
      }
    }
    .el-input {
      width: 30%;
      /deep/ .el-input__inner {
        border: none;
        padding: 0;
      }
    }
    .noProject {
      width: 415px;
      height: 235px;
      padding-top: 60px;
      background: #f5f7fa;
      border: 1px solid #dee5f4;
      text-align: center;
    }
  }
  .createSalaryBut {
    background: #009588;
    border: 1px solid #009588;
    padding: 9px 15px;
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
